<template>
	<view class="logins">
		<nav-bar isBack  :title="title" ></nav-bar>
		<view class="card">
		    <view class="card_name">*所在城市</view>
		    <picker @change="pickerChange" @columnchange="bindMultiPickerColumnChange" id="address" mode="region" value="">
		           <text class="av1" :class="{av2:regionStr}"> {{regionStr ||'未选择'}}</text>
		      </picker>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*户型</view>
		    <picker @change="bindPickerChange" :value="index" :range="bedroom">
				<text class="av1" :class="{av2:house_type}">{{house_type ||'未选择'}}</text>
			</picker>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*建筑面积</view>
			<text class="rightx">m²</text>
		    <input class="price_input" style="padding-right: 50rpx;"  placeholder="未填写" type="number" v-model="house_area"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*房屋类型</view>
		    <picker @change="bindPicker" :value="index" :range="array">
				<text class="av1" :class="{av2:room_type}">{{room_type ||'未选择'}}</text>
			</picker>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="card">
		    <view class="card_name">*装修预算</view>
			<text class="rightx">万元(含设计费)</text>
		    <input class="price_input" style="padding-right: 200rpx;"  placeholder="未填写" type="number" v-model="renovate_budget"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view class="cards">
		    <view class="card_name">需求描述(选填) <text>{{remark.length}}/1000</text></view>
			<view style="margin: 0 30rpx;"><textarea v-model="remark" maxlength="1000" placeholder="描述您的需求吧~"/></view>
		</view>
		<view class="cards">
		    <view class="card_name">户型图(选填)<text>{{imgnum}}/9</text></view>
			 <view>
				<imgUpload :count="count" @obtain_img="obtain_img" :list="img_list" :name="name" :header="header" :url="url"></imgUpload>
			</view>	
		</view>
		<view class="card">
		    <view class="card_name">*手机号</view>
		    <input class="price_input"  placeholder="未填写" type="number" v-model="phone"></input>
		    <i class="iconfont icon-more"></i>
		</view>
		<view @click="submitAddress" class="bnt">保存</view>
	</view>
</template>

<script>
import navBar from "@/components/navBar/navBar.vue"
import imgUpload from '@/components/linzq-imgUpload/linzq-imgUpload.vue'
import service_my from '@/service/my.js'
import URL from '@/config/url.js'


export default {
	components: { navBar ,imgUpload},
	
	data() {
		return {
			title:'填写装修信息',
			regionStr: '',
			province: '',
			city:'',
			area:'',
			house_type:'',
			house_area:'',
			room_type:'',
			renovate_budget:'',
			phone:'',
			remark:'',
			house_thumb_url:'',
			bedroom:["一室","二室","三室","四室","复式","别墅"],
			array:["精装","毛坯房","小平房","自建房"],
			count: 9,
			name: 'file',   //必填
			url: URL.ENTER_UPLOAD_IMAGE,  
			header: {
				 access_token:'',
				'content-type': 'application/json',
				 user_id:''
			},
		    img_list:[],
			is_default: '0',
			showCitySel: false,
			imgnum:0,
		}
	},
	onLoad(option) {
		this.$utils.getUrl()
		this.gitdata()
	},
	methods: {
		obtain_img(data) {
			this.img_list = data
			this.imgnum = data.length
		},
		pickerChange(t) {
			this.province = t.detail.value[0],
			this.city= t.detail.value[1],
			this.area = t.detail.value[2],
			this.regionStr = t.detail.value.join(" ")
		},
		bindPickerChange: function(e) {
			this.house_type = this.bedroom[e.target.value]
		},
		bindPicker: function(e) {
			this.room_type = this.array[e.target.value]
		},
		// 档案详情
		gitdata() {
			uni.showLoading({
			    title: '加载中...',
				mask: true
			})
			service_my.getDetail({
			}).then(res => {
				uni.hideLoading();
				if (res.code == 1) {
					this.regionStr=res.data.city
					this.house_type=res.data.house_type
					this.house_area=res.data.house_area
					this.room_type=res.data.room_type
					this.renovate_budget=res.data.renovate_budget		
					this.phone=res.data.phone
					this.remark=res.data.remark
					if(res.data.house_thumb_url.length>1){
						res.data.house_thumb_url.forEach(v => {
								this.img_list.push({
									id:v.id,
									url:v.path
								})
						})
					}else{
						this.img_list.push({
							id:res.data.house_thumb_url.id,
							url:res.data.house_thumb_url.path
						})
					}
					
					this.imgnum = res.data.house_thumb_url.length
				} else {
					uni.showToast({
						title: res.message,
						icon: "none"
					});
				}
			}).catch(err => {
			
			})
		},
		// 保存
		submitAddress() {
			if (!this.house_type) return uni.showToast({title: "请选择户型", icon: "none"});
			if (!this.house_area) return uni.showToast({title: "请输入面积", icon: "none"});
			if (!this.room_type) return uni.showToast({title: "请选择房屋类型", icon: "none"});
			if (!this.renovate_budget) return uni.showToast({title: "请输入预算", icon: "none"});
			if (!this.phone) return uni.showToast({title: "请填写号码", icon: "none"});
			if (!this.isPhone(this.phone)) return uni.showToast({title: "号码格式不对", icon: "none"});
			if (!this.regionStr) return  uni.showToast({title: "请填写地址", icon: "none"});
			let imgid = []
			this.img_list.forEach(v => {
					imgid.push(v.id)
			})
			imgid = imgid.join()
			uni.showLoading('正在保存中...')
            service_my.getedit({
					city: this.regionStr,
					house_type: this.house_type,
					house_area: this.house_area,
					room_type:this.room_type,
					renovate_budget:this.renovate_budget,			
					phone: this.phone,
					remark:this.remark,
					house_thumb_url:imgid
		        }).then(res => {
				uni.hideLoading();
				if(res.code == 1){
					let orderid = res.data
					var t = this;
					uni.showToast({
					  title: '保存成功!',
					  icon: "none"
					});	
				}else{
		          uni.showToast({
		            title: res.msg,
		            icon: "none"
		          });
				}
			}).catch(err=>{
				
			})
		},
		isPhone(t) {
		        return /^1[3|4|5|6|7|8|9]\d{9}$/.test(t);
		 },
		radioChange(t) {
			if(t.currentTarget.dataset.checked == 0){
				this.is_default = 1
			}else{
				this.is_default = 0
			}
		},
	}
}
</script>

<style lang="scss" scoped>
	.logins{
		width: 100%;height: 100%;background: #fff;display: flex;flex-flow: column;
	}
.p_design{
	background: #fff;
	margin: 20rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	box-shadow: 4rpx 4rpx 10rpx 4rpx rgba(0, 0, 0, 0.1);
	padding-left: 160rpx;
	min-height: 160rpx;
	position: relative;
	.p_uHeadimg{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border:5rpx #FFD425 solid;
		position: absolute;
		top:20rpx;
		left: 20rpx;
		background: #f9f9f9;
		overflow: hidden;
	}
	.p_tit{
		padding: 10rpx 0;
	}
	.p_uName{
		font-size: 30rpx;
		font-weight: bold;
		line-height: 50rpx;
	}
	.p_u{
		font-size: 26rpx;
		color: #939393;
	}
	
}	
.card {
	    padding: 10rpx;
	    display: flex;
	    align-items: center;
	    background-color: #fff;
	    margin: 20rpx;
		position: relative;
	}
	
	.card_name {
	    flex-shrink: 0;
	    padding-right: 60rpx;
	}
	
	.price_input {
	    width: 100%;
	    font-size: 28rpx;
		text-align: right;
	}
	picker{
		width: 100%;
		text-align: right;
	}
	.cell_c,.cell navigator {
	    margin: 20rpx;
	    padding: 20rpx 0 20rpx 20rpx;
	    font-size: 32rpx;
	    display: flex;
	    align-items: center;
	}
	
	.cell_c picker {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		line-height: 25px;
		padding-left: 54rpx;
		height: 46rpx;
		text-align: left;
	}
	
	.cell_name {
	    flex-shrink: 0;
	}
	
	.line {
	    padding: 10rpx;
	    background-color: #f6f6f6;
	}
	
	.radio-cell {
	    padding: 20rpx;
	    font-size: 28rpx;
	    color: #999;
	}
	
	.bnt {
	    background-color: #C3AB7C;
	    color: #fff;
		
	}
	
	.bnt,.bnt-delete {
	    padding: 20rpx 20rpx;
	    margin: 20rpx;
	    text-align: center;
	    border-radius: 40rpx;
	}
	
	.bnt-delete {
	    background-color: #f6f6f6;
	}
.cards{
	padding: 10rpx 0;
	background-color: #fff;
	margin: 20rpx 0;
	.card_name{
		padding: 0 30rpx;
		text{
			float: right;
			color: #999;
		}
	}
	textarea{
		width: 100%;
		margin: 20rpx 0;
		background: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		height: 240rpx;
	}
}
.rightx{
	position: absolute;
	right: 30rpx;
	top: 10rpx;
}
.av1{
	color: #888;
}
.av2{
	color: #333;
}
</style>